<template>
	<view class="menuWrapper">
		<swiper class="mySwiper" :indicator-dots="true" indicator-color="#e3ecff" indicator-active-color="#266dff">
			<swiper-item class="mySwiperItem" v-for="(item,index) in dataset" :key="item.id">
				<view class="menuItem" v-for="(menuItem,index) in item.children" :key="menuItem.alias" @click.stop="jumpTo(menuItem)">
					<image class="img" :src="`../../static/img/menu/${menuItem.alias}.png`"></image>
					<view class="text">{{menuItem.title}}</view>
				</view>  
			</swiper-item>
		</swiper>
	</view>
</template> 

<script>  
export default {
  name: 'Menu',
  props: ['dataset'],
  methods: {
    jumpTo (params) {
		/**
		 * urgent急聘专区 
		 * famous名企直聘 
		 * jobfairs招聘会 
		 * company搜企业 
		 * resume找人才 
		 * job找工作 
		 * article新闻资讯 
		 * map地图找工作
		 * */ 
		const menuRoute = {
          urgent: '/commonViews/EmergencyList',
          famous: '/commonViews/FamousList',
          jobfairs: '/jobfairs/JobfairsList',
          resume: '/views/ResumeList',
          company: '/views/CompanyList',
          article: '/commonViews/News',
		  job:'/views/JobList',
		  map: '/commonViews/Jobmap'
        }
		uni.navigateTo({  
			url:menuRoute[params.alias]
		})
    }
  }
}
</script>

<style lang="scss" scoped>
	.menuWrapper{
		
		height: 250rpx;
		background: #fff;
		border-radius: 15rpx;
		padding: 33rpx 24rpx 0 24rpx;
		margin-bottom: 20rpx;
		.mySwiper{
			// display
			height: 100%;
			.mySwiperItem{
				display:flex;
				// justify-content: space-between;
				// align-items: center;
				.menuItem{
					flex:0 0 20%;
					text-align: center;
					.img{
						width: 100rpx;
						height: 100rpx;
						display: block;
						margin: 0 auto;
					}
					.text{
						color:#2a2a2a;
						font-size: 26rpx;
						margin-top: 25rpx;
					}
				}
			}
		}
	}
</style>
